<template>
	<view v-if="userFans.length !== 0">
		<view class="item" v-for="item in userFans" :key="item.id">
			<image :src="item.userImg" mode="widthFix"></image>
			<view class="content"  @click="router('/pages/person/othersHomepage', item.userId)">
				<text class="title">{{item.userName}}</text>
				<text class="two">{{item.userSign}}</text>
				<text style="color: rgb(142,142,142);">{{JSON.parse(item.fansSize).length}}位粉丝</text>
			</view>
			<view class="btnBox">
				<el-button style='width: 100%; padding: 10upx; color: white; background: rgb(40,210,209); border: none;'
					@click='click(item)' v-if="item.show">已关注</el-button>
				<el-button style='width: 100%; padding: 10upx; color: grey;' @click='click2(item)' v-else>+关注
				</el-button>
			</view>
		</view>
	</view>
	<view class="showView" v-else>
		暂无粉丝
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: 0,
				userData: {},
				// 当前用户所有的粉丝
				userFans: []
			};
		},
		methods: {
			router(path, userId) {
				uni.navigateTo({
					url: `${path}?otherUserId=${userId}`
				})
			},
			// 已关注用户的点击事件
			click(activeData) {
				// console.log(activeData.fansSize)
				delete activeData.show
				// 当前用户关注 -1
				this.userData.followSize = JSON.stringify(JSON.parse(this.userData.followSize).filter(item => item !==
					activeData.userId))
				this.$api.putTcyg(this.userData)
				// 被取消用户的粉丝 -1
				activeData.fansSize = JSON.stringify(JSON.parse(activeData.fansSize).filter(item => item !== this.userId))
				// console.log(activeData)
				this.$api.putTcyg(activeData).then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.$api.getTcygUserId(this.userId).then(res => {
							if (res.code == 200) {
								this.userData = res.data[0]
							}
						})
					}
				})
			},
			// +关注用户的点击事件
			click2(activeData) {
				// console.log(activeData.userId)
				delete activeData.show
				// 当前用户关注 +1
				let followArr = JSON.parse(this.userData.followSize)
				followArr.push(activeData.userId)
				this.userData.followSize = JSON.stringify(followArr)
				// console.log(this.userData)
				this.$api.putTcyg(this.userData)
				// 被观众用户的粉丝 +1
				let fansArr = JSON.parse(activeData.fansSize)
				fansArr.push(this.userId)
				activeData.fansSize = JSON.stringify(fansArr)
				// console.log(activeData)
				this.$api.putTcyg(activeData).then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.$api.getTcygUserId(this.userId).then(res => {
							if (res.code == 200) {
								this.userData = res.data[0]
							}
						})
					}
				})
			}
		},
		onShow() {
			const userId = getApp().globalData.userId;
			this.userId = userId
			this.$api.getTcygUserId(userId).then(res => {
				if (res.code == 200) {
					this.userData = res.data[0]
				}
			})
		},
		watch: {
			"userData.fansSize": {
				handler(newValue, oldValue) {
					if (newValue.length !== 0) {
						let fansUser = []
						JSON.parse(newValue).map(item => {
							this.$api.getTcygUserId(item).then(res => {
								if (res.code == 200) {
									// 判断当前用户的粉丝userId是否出现在当前用户关注的userId中
									// 如果是，则为互关
									if (JSON.parse(this.userData.followSize).includes(item)) {
										res.data[0].show = true
									} else {
										res.data[0].show = false
									}
									fansUser.push(res.data[0])
									this.userFans = fansUser
									this.userFans.sort((a, b) => {
										return a.id - b.id
									})
								}
							})
						})
					} else {
						this.userFans = []
					}
				},
				deep: true
			},
			// userFans: {
			// 	handler(newValue, oldValue) {
			// 		console.log(newValue)
			// 		newValue.forEach(item => {
			// 			item.show = false
			// 			JSON.parse(this.userData.followSize).map(item2 => {
			// 				JSON.parse(item.fansSize).map(item3 => {
			// 					if (item3 == item2) {
			// 						item.show = true
			// 					}
			// 				})
			// 			})
			// 		})
			// 	},
			// 	deep: true
			// }
		}
	}
</script>

<style lang="scss">
	.item {
		width: 90%;
		margin: 40upx auto;
		box-sizing: border-box;
		padding: 20upx;
		border-radius: 16upx;
		box-shadow: 0px 4upx 18upx rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: space-around;
		align-items: center;

		image {
			width: 10%;
		}

		.content {
			width: 60%;
			height: 100%;
			font-size: 24upx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.title {
				font-weight: bold;
			}

			.two {
				margin: 10upx 0;
			}
		}

		.btnBox {
			width: 20%;
		}
	}

	.showView {
		width: 130upx;
		margin: 300upx auto 0;
	}
</style>
